"use strict";
$(function () {

    $(".zScrollBar").panel({iWheelStep: 32}); //初始化滚动条

    timeInterval(); //时间显示

});

/**
 * 显示时间
 */
function timeInterval() {
    function nowTime() {
        var time = new Date().format("yyyy 年 MM 月 dd 日 w hh:mm:ss");
        $("#time").html(time);
    }

    nowTime();
    setInterval(nowTime, 1000);
}

/**
 * 大数字滚动显示初始化
 * @param v 数字
 * @param t 显示几位
 */
function numRoll(v, t) {
    var $num = $("#numbers");
    if (!t) {
        t = 9;
    }
    $num.rollNum({
        deVal: v, //显示的数字
        digit: t //显示几位
    });
}

/**
 * 绘制仪表图
 * @param domId
 * @param name
 * @param v
 * @param max
 */
function draw_gauge(domId, name, v, max) {
    var option = {
        tooltip: {
            formatter: "{c}辆"
        },
        axisLabel: {
            show: false,
            formatter: function (v) {
                return '';
                switch (v) {
                    case 0:
                        return v;
                    case max:
                        return v;
                }
            }
        },
        series: [
            {
                name: '数量',
                type: 'gauge',
                min: 0,
                max: max,
                radius: '90%',
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: [[0.10, 'lime'], [0.60, '#1e90ff'], [0.90, '#FFAA00'], [1, '#ff4500']],
                        width: 8,
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 10
                    }
                },
                axisTick: {
                    length: 2
                },
                splitLine: {
                    length: 4
                },
                detail: {
                    offsetCenter: [0, 0],       // x, y，单位px
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontSize: 16,
                        fontStyle: 'italic',
                        fontWeight: 'bolder',
                        color: '#fff',
                        shadowColor: '#000',
                        shadowBlur: 10
                    }
                },
                title: {
                    offsetCenter: [0, '80%'],       // x, y，单位px
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontSize: 15,
                        color: '#fff',
                        shadowColor: '#000', //默认透明
                        shadowBlur: 10
                    }
                },
                data: [{value: v, name: name}]
            }
        ]
    };
    eChart_draw(domId, option);
}

/**
 * 绘制各区县车位总数柱状图
 * @param domId
 * @param data
 */
function draw_barCars(domId, data) {
    var names = [], values = [];
    $.each(data, function (i, v) {
        names.push(v.name);
        values.push(v.value);
    });
    var option = {
        tooltip: {},
        grid: {
            left: 0,
            right: 0,
            top: '15px',
            bottom: 0,
            containLabel: true
        },
        xAxis: {
            type: 'category',
            axisLine: {
                show: true,
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: '#fff',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                interval: 0, //文字全显示
                rotate: 22, //防止文字重叠，倾斜角度
                textStyle: {
                    color: '#fff',
                    fontSize: 11
                }
            },
            data: names
        },
        yAxis: {
            type: 'value',
            splitLine: {show: false},
            axisLine: {
                show: true,
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: '#fff',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            axisTick: {
                show: true
            },
            axisLabel: {
                textStyle: {
                    color: '#fff'
                }
            }
        },
        series: [{
            type: 'bar',
            barMaxWidth: 18,
            label: {
                normal: {
                    show: true,
                    align: 'center',
                    position: 'top',
                    color: '#fff'
                }
            },
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#7052F4'},
                            {offset: 0.5, color: '#4B71F7'},
                            {offset: 1, color: '#02AFFF'}
                        ]
                    )
                },
                emphasis: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#02AFFF'},
                            {offset: 0.7, color: '#4B71F7'},
                            {offset: 1, color: '#7052F4'}
                        ]
                    )
                }
            },
            data: values
        }]
    };
    eChart_draw(domId, option);
}

/**
 * 绘制品牌柱状图
 * @param domId
 * @param data
 */
function draw_barBrands(domId, data) {
    var names = [], values = [];
    data.reverse();
    $.each(data, function (i, v) {
        names.push(v.name);
        values.push(v.value);
    });
    var option = {
        tooltip: {},
        grid: {
            left: 0,
            right: '50px',
            top: 0,
            bottom: 0,
            containLabel: true
        },
        yAxis: {
            type: 'category',
            axisLine: {
                show: true,
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: '#666',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                // interval: 0, //文字全显示
                textStyle: {
                    color: '#fff',
                    fontSize: 11
                }
            },
            data: names
        },
        xAxis: {
            type: 'value',
            splitLine: {show: false},
            axisLine: {
                show: false,
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: '#fff',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false,
                textStyle: {
                    color: '#fff'
                }
            }
        },
        series: [{
            type: 'bar',
            barMaxWidth: 18,
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    color: '#fff'
                }
            },
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        1, 0, 0, 0,
                        [
                            {offset: 0, color: '#86C9F4'},
                            {offset: 0.5, color: '#4B71F7'},
                            {offset: 1, color: '#02AFFF'}
                        ]
                    )
                },
                emphasis: {
                    color: new echarts.graphic.LinearGradient(
                        1, 0, 0, 0,
                        [
                            {offset: 0, color: '#02AFFF'},
                            {offset: 0.7, color: '#86C9F4'},
                            {offset: 1, color: '#4B71F7'}
                        ]
                    )
                }
            },
            data: values
        }]
    };

    eChart_draw(domId, option);
}

/**
 * 绘制数量统计柱状图
 * @param domId
 * @param a 设备总数
 * @param b 设备告警数
 * @param c 剩余车位
 * @param d 总车位数
 */
function draw_barCount(domId, a, b, c, d) {
    var option = {
        tooltip: {},
        legend: {
            type: 'scroll',
            orient: 'vertical',
            left: 'right',
            top: 'top',
            textStyle: {
                color: '#fff'
            }
        },
        grid: {
            left: '-15%',
            right: '40%',
            top: '15px',
            bottom: 0,
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                show: false
            }
        ],
        yAxis: [
            {
                type: 'value',
                show: false
            }
        ],
        series: [
            {
                name: '设备总数',
                type: 'bar',
                barMaxWidth: 15,
                barGap: '200%',
                itemStyle: {
                    normal: {
                        color: '#5E88B4',
                        barBorderRadius: 10
                    }
                },
                label: {
                    normal: {
                        show: true,
                        align: 'center',
                        position: 'top',
                        color: '#fff'
                    }
                },
                data: [a]
            },
            {
                name: '设备告警数',
                type: 'bar',
                barMaxWidth: 15,
                barGap: '200%',
                itemStyle: {
                    normal: {
                        color: '#EA3345',
                        barBorderRadius: 10
                    }
                },
                label: {
                    normal: {
                        show: true,
                        align: 'center',
                        position: 'top',
                        color: '#fff'
                    }
                },
                data: [b]
            },
            {
                name: '剩余车位',
                type: 'bar',
                barMaxWidth: 15,
                barGap: '200%',
                itemStyle: {
                    normal: {
                        color: '#EDA350',
                        barBorderRadius: 10
                    }
                },
                label: {
                    normal: {
                        show: true,
                        align: 'center',
                        position: 'top',
                        color: '#fff'
                    }
                },
                data: [c]
            },
            {
                name: '总车位数',
                type: 'bar',
                barMaxWidth: 15,
                barGap: '200%',
                itemStyle: {
                    normal: {
                        color: '#6BE6C1',
                        barBorderRadius: 10
                    }
                },
                label: {
                    normal: {
                        show: true,
                        align: 'center',
                        position: 'top',
                        color: '#fff'
                    }
                },
                data: [d]
            }
        ]
    };
    eChart_draw(domId, option);
}

/**
 * 绘制收入折线区域图
 * @param domId
 * @param data
 */
function draw_lineIncome(domId, data) {
    var names = [], values = [];
    $.each(data, function (i, v) {
        names.push(v.name);
        values.push(v.value);
    });
    var option = {
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: 0,
            right: '20px',
            top: '26px',
            bottom: 0,
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLine: {
                show: true,
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: '#664CE4',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: true,
                interval: 0, //文字全显示
                rotate: 45, //防止文字重叠，倾斜角度
                textStyle: {
                    color: '#fff'
                }
            },
            data: names
        },
        yAxis: {
            type: 'value',
            name: '单位：万元',
            nameLocation: 'end',
            nameTextStyle: {
                color: "#fff",
                fontSize: 10
            },
            splitLine: {show: false},
            axisLine: {
                show: false,
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: '#fff',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#fff'
                }
            }
        },
        series: [{
            type: 'line',
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: 'red' // 0% 处的颜色
                    }, {
                        offset: 1, color: 'blue' // 100% 处的颜色
                    }],
                    globalCoord: false // globalCoord 为 `true`，前四个值是绝对的像素位置
                }
            },
            smooth: true,
            data: values
        }]
    };
    eChart_draw(domId, option);
}

/**
 * 绘制收入折线区域图
 * @param domId
 * @param data
 */
function draw_piePay(domId, data) {

    var legendData = [], legendSelected = {};
    $.each(data, function (index, item) {
        legendData.push(item.name);
        legendSelected[item.name] = (item.value != 0);
    });

    var option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a}<br/>{b}：{c}万元({d}%)"
        },
        grid: {
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
            containLabel: true
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            left: 'right',
            top: 'top',
            textStyle: {
                color: '#f0f0f0',
                fontSize: 11
            },
            pageIconColor: '#fff',
            pageIconSize: 10,
            pageTextStyle: {color: '#fff', fontSize: 10},
            data: legendData,
            selected: legendSelected
        },
        series: [
            {
                name: '支付方式',
                type: 'pie',
                radius: [0, '68%'],
                center: ['42%', '52%'],
                label: {
                    normal: {
                        show: true,
                        formatter: '{b}{d}%',
                        fontSize: 12
                    }
                },
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0,0,0,0.5)'
                    }
                },
                color: ['#0798C5', '#3CEDFF', '#FFF065', '#FD9EE5', '#FF7DA1', '#F66BBF', '#FFAE8B', '#FECEFF', '#9084FF', '#ACA5FF'],
                data: data
            }
        ]
    };

    eChart_draw(domId, option);
}


/**
 * 绘制eCharts地图
 * @param domId
 * @param data
 * @param click 点击事件的回调
 */
function drawChart_map(domId, data, click) {
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: function (item) {
                var name = item.data.name, value = item.data.value[2];
                return name + '：' + value;
            }
        },
        geo: {
            map: '苏州',
            roam: true,
            zoom: 1.15,
            label: {
                normal: {
                    show: true, //是否显示省份名称
                    textStyle: {
                        color: '#666'
                    }
                },
                emphasis: {
                    textStyle: {
                        color: '#f0f0f0'
                    }
                }
            },
            itemStyle: {
                normal: {
                    areaColor: '#35A4FD',
                    borderColor: '#999'
                },
                emphasis: {
                    areaColor: '#52B2FE',
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        },
        series: [
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                data: data,
                symbolSize: 12, //点的大小
                label: {
                    normal: {
                        show: true, //是否显示名称
                        formatter: '{b}',
                        position: 'right',
                        textShadowColor: '#fff',
                        textShadowBlur: 5
                    },
                    emphasis: {
                        show: true, //鼠标经过点时，是否显示名称
                        textShadowColor: '#000',
                        color: '#FFFF00'
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#F06C00'
                    },
                    emphasis: {
                        color: '#FFFF00'
                    }
                }
            }
        ]
    };
    eChart_draw(domId, option, click);
}


//模拟车位 todo
function getParks(x, roadName) {
    roadName = roadName || '';
    var parks = '';
    var count = 0;
    for (var i = 1; i < x + 1; i++) {
        if (i % 5 == 0) { //有车
            parks += '<div class="park has">' + i + '</div>';
            count++;
        } else { //无车
            parks += '<div class="park">' + i + '</div>';
        }
    }
    $("#parking").css('top', 0).html(parks);
    $("#roadName").html(roadName);
    $(".hasCarNum").html(count); //有车数量
    $(".noCarNum").html(x - count); //无车数量
}